<template>
  <div class="contract-order-generate-view">
    <!-- 合同信息区域 -->
    <div class="contract-info-section">
      <div class="section-header">
        <h3><i class="el-icon-document"></i> 合同信息</h3>
      </div>
      <div class="contract-details">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label>合同编号：</label>
              <span>{{ contractInfo.contract_name }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>企业名称：</label>
              <span>{{ contractInfo.companyName }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>合同金额：</label>
              <span class="amount">¥{{ formatMoney(contractInfo.cost) }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 15px;">
          <el-col :span="8">
            <div class="info-item">
              <label>收货人：</label>
              <span>{{ contractInfo.recipient_name || '未设置' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>联系电话：</label>
              <span>{{ contractInfo.recipient_tel || '未设置' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label>收货地址：</label>
              <span>{{ contractInfo.recipient_address || '未设置' }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 产品选择区域 -->
    <div class="product-selection-section">
      <div class="section-header">
        <h3><i class="el-icon-goods"></i> 产品选择</h3>
        <div class="header-actions">
          
          <el-button size="small" @click="goBack">返回</el-button>
        </div>
      </div>
      <br>
      <!-- 产品搜索 -->
      <div class="search-bar">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入产品名称进行搜索"
          prefix-icon="el-icon-search"
          size="small"
          style="width: 300px;"
          clearable
          @input="filterProducts"
        ></el-input>
      </div>

      <!-- 产品列表 -->
      <div class="product-list">
        <div v-for="device in filteredDeviceList" :key="device.id" class="device-item">
          <div class="device-header">
            <div class="device-title">
              <strong>{{ device.device_name }}</strong>
              <el-tag v-if="device.is_need" type="warning" size="mini">需要流量卡</el-tag>
              <el-tag v-else type="info" size="mini">无需流量卡</el-tag>
            </div>
            <div class="device-actions">
              <div class="quantity-selector">
                <label>数量：</label>
                <el-input-number 
                  v-model="device.quantity" 
                  :min="1" 
                  :max="9999"
                  size="mini"
                  style="width: 100px;"
                  placeholder="数量"
                  @change="handleDeviceQuantityChange(device)"
                ></el-input-number>
              </div>
              <el-button 
                type="primary" 
                size="mini" 
                @click="addDeviceToCart(device)"
                icon="el-icon-plus"
              >
                添加产品
              </el-button>
            </div>
          </div>
          
          <div class="factory-info">
            <span><strong>工厂：</strong>{{ device.factory.factory_name }}</span>
            <span><strong>地址：</strong>{{ device.factory.address }}</span>
          </div>
          
          <!-- 配件列表 -->
          <div class="accessories-list">
            <h5>配件列表：</h5>
            <div class="accessories-grid">
              <div 
                v-for="accessory in device.accessories" 
                :key="accessory.id"
                class="accessory-item"
              >
                <div class="accessory-header">
                  <el-checkbox 
                    v-model="accessory.selected" 
                    @change="handleAccessoryChange(device, accessory)"
                  >
                    <span class="accessory-name">{{ accessory.accessory_name }}</span>
                  </el-checkbox>
                  <el-tag 
                    :type="accessory.is_standard === 1 ? 'success' : 'warning'" 
                    size="mini"
                  >
                    {{ accessory.is_standard === 1 ? '标配' : '选配' }}
                  </el-tag>
                </div>
                
                <!-- 多规格选择 -->
                <div class="standards-selection" :class="{ 'has-standards': accessory.standards && accessory.standards.length > 0 }">
                  <div v-if="accessory.standards && accessory.standards.length > 0" class="standards-container">
                    <div 
                      v-for="standard in accessory.standards" 
                      :key="standard.id" 
                      class="standard-item"
                    >
                      <div class="standard-header">
                        <span class="standard-name">{{ standard.standard_name }}</span>
                      </div>
                      <div class="standard-values">
                        <el-radio-group 
                          v-model="accessory.selectedStandards[standard.id]" 
                          size="mini"
                          @change="handleStandardChange(device, accessory, standard)"
                        >
                          <el-radio 
                            v-for="value in standard.values" 
                            :key="value.id"
                            :label="value.id"
                            class="standard-radio"
                          >
                            {{ value.standard_value }}
                          </el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                  </div>
                  <div v-else class="no-standards">
                    <span class="no-standards-text">无规格要求</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 已选产品列表 -->
    <div class="selected-products-section">
      <div class="section-header">
        <h3><i class="el-icon-shopping-cart-2"></i> 已选产品 
          <el-button type="text" size="mini" @click="clearCart" style="margin-left: 10px;">清空已选择产品</el-button>
          <el-button 
            v-if="cartItems.length > 0" 
            type="text" 
            size="mini" 
            @click="syncShippingInfo" 
            style="margin-left: 10px; color: #409eff;"
            icon="el-icon-refresh"
          >
            同步发货信息
          </el-button>
        </h3>
      </div>
      
      <div v-if="cartItems.length === 0" class="empty-cart">
        <p style="color: #999; text-align: center; padding: 40px;">未选择任何产品，请选择产品</p>
      </div>
      
      <div v-else class="cart-items">
        <div v-for="(item, index) in cartItems" :key="index" class="cart-item">
          <div class="cart-item-header">
            <div class="device-info">
              <span class="device-name">{{ item.device_name }}</span>
              <span v-if="item.accessories && item.accessories.length > 0" class="device-config">
                ({{ item.accessories.map(acc => {
                  if (acc.standardsInfo && acc.standardsInfo.trim()) {
                    return acc.accessory_name + ' - ' + acc.standardsInfo;
                  } else {
                    return acc.accessory_name;
                  }
                }).join(', ') }})
              </span>
            </div>
            <el-button 
              type="danger" 
              size="mini" 
              @click="removeFromCart(index)"
              icon="el-icon-delete"
            >
              删除
            </el-button>
          </div>
          
          <div class="cart-item-details">
            <div class="quantity-section">
              <label>数量：</label>
              <el-input-number 
                v-model="item.quantity" 
                :min="1" 
                :max="9999"
                size="mini"
                style="width: 100px;"
              ></el-input-number>
            </div>
            
            <div class="accessories-section" v-if="item.accessories && item.accessories.length > 0">
              <label>配件：</label>
              <div class="accessories-tags">
                <el-tag 
                  v-for="accessory in item.accessories" 
                  :key="accessory.id"
                  size="mini"
                  :type="accessory.is_standard === 1 ? 'success' : 'warning'"
                >
                  {{ accessory.accessory_name }}{{ accessory.standardsInfo && accessory.standardsInfo.trim() ? ' - ' + accessory.standardsInfo : '' }}
                  <span style="font-size: 10px; margin-left: 4px;">({{ accessory.is_standard === 1 ? '标配' : '选配' }})</span>
                </el-tag>
              </div>
            </div>
            
            <!-- 发货信息区域 -->
            <div class="shipping-info-section">
              <h5 class="shipping-title">
                <i class="el-icon-location"></i>
                发货信息
              </h5>
              <div class="shipping-form">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <div class="form-item">
                      <label class="form-label">收货人：</label>
                      <el-input 
                        v-model="item.shipping_info.recipient_name" 
                        placeholder="收货人姓名"
                        size="small"
                        clearable
                      ></el-input>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="form-item">
                      <label class="form-label">联系电话：</label>
                      <el-input 
                        v-model="item.shipping_info.recipient_tel" 
                        placeholder="联系电话"
                        size="small"
                        clearable
                      ></el-input>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="form-item">
                      <label class="form-label">收货地址：</label>
                      <el-input 
                        v-model="item.shipping_info.recipient_address" 
                        placeholder="收货地址"
                        size="small"
                        clearable
                      ></el-input>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="15" style="margin-top: 10px;">
                  <el-col :span="24">
                    <div class="form-item">
                      <label class="form-label">订单备注：</label>
                      <el-input 
                        v-model="item.shipping_info.remark" 
                        placeholder="请输入该产品的订单备注信息"
                        type="textarea"
                        :rows="2"
                        size="small"
                        clearable
                      ></el-input>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>

          </div>
          
        </div>
      </div>
    </div>
    <el-button type="primary" size="small" @click="generateOrders" :loading="generating">
            生成订单
    </el-button>
  </div>
</template>

<script>
import { getDeviceListMore, generateOrder } from '@/api/contract';
import { checkToken, handleTokenExpired, checkTokenFromError } from '@/utils/auth';

export default {
  name: 'ContractOrderGenerateView',
  data() {
    return {
      // 合同信息
      contractInfo: {},
      
      // 设备列表
      deviceList: [],
      filteredDeviceList: [],
      
      // 购物车
      cartItems: [],
      
      // 搜索
      searchKeyword: '',
      
      // 状态
      generating: false
    }
  },
  
  mounted() {
    this.initPage();
  },
  
  methods: {
    // 初始化页面
    initPage() {
      // 从路由参数获取合同信息
      if (this.$route.params.contractData) {
        this.contractInfo = this.$route.params.contractData;
      }
      
      // 加载设备列表
      this.loadDeviceList();
      
      // 自动填充发货信息
      this.$nextTick(() => {
        this.autoFillShippingInfo();
      });
    },
    
    // 加载设备列表
    async loadDeviceList() {
      try {
        if (!checkToken()) {
          this.$message.error('登录已过期，请重新登录');
          handleTokenExpired();
          return;
        }
        
        const response = await getDeviceListMore();
        
        if (response.data && response.data.code === true) {
          // 处理设备数据，为配件添加选择状态和默认规格选择
          this.deviceList = response.data.data.map(device => ({
            ...device,
            quantity: 1, // 默认数量为1
            accessories: device.accessories.map(accessory => {
              const accessoryData = {
                ...accessory,
                selected: accessory.is_standard === 1, // 标配默认选中，选配默认不选中
                selectedStandards: {} // 初始化多规格选择状态
              };
              
              // 如果有规格，设置默认选择第一个属性值
              if (accessory.standards && accessory.standards.length > 0) {
                accessory.standards.forEach(standard => {
                  if (standard.values && standard.values.length > 0) {
                    accessoryData.selectedStandards[standard.id] = standard.values[0].id;
                  }
                });
              }
              
              return accessoryData;
            })
          }));
          
          // 初始化过滤后的列表
          this.filteredDeviceList = [...this.deviceList];
          
          console.log('设备列表数据:', this.deviceList);
        } else {
          this.$message.error(response.data.msg || '获取设备列表失败');
        }
      } catch (error) {
        console.error('获取设备列表失败:', error);
        if (checkTokenFromError(error)) {
          this.$message.error('登录已过期，请重新登录');
          handleTokenExpired();
        } else {
          this.$message.error('获取设备列表失败');
        }
      }
    },
    
    // 过滤产品列表
    filterProducts() {
      this.filteredDeviceList = this.deviceList.filter(device => 
        device.device_name.toLowerCase().includes(this.searchKeyword.toLowerCase())
      );
    },
    
    // 添加设备到购物车
    addDeviceToCart(device) {
      // 收集选中的配件（标配和手动选中的选配）
      const selectedAccessories = [];
      device.accessories.forEach(accessory => {
        if (accessory.selected) {
          const accessoryItem = {
            id: accessory.id,
            accessory_name: accessory.accessory_name,
            is_standard: accessory.is_standard,
            selectedStandards: JSON.parse(JSON.stringify(accessory.selectedStandards)), // 深拷贝，避免引用问题
            standardsInfo: this.getStandardsInfo(accessory)
          };
          selectedAccessories.push(accessoryItem);
        }
      });
      
      // 生成唯一的项目标识（设备ID + 配件组合的哈希值）
      const accessoriesHash = this.generateAccessoriesHash(selectedAccessories);
      const cartItemKey = `${device.id}_${accessoriesHash}`;
      
      // 检查是否已存在相同配置的设备
      const existingCartItem = this.cartItems.find(item => {
        const itemAccessoriesHash = this.generateAccessoriesHash(item.accessories);
        return item.device_id === device.id && itemAccessoriesHash === accessoriesHash;
      });
      
      if (existingCartItem) {
        // 如果配置已存在，更新数量
        existingCartItem.quantity = device.quantity;
        this.$message.success(`已更新 ${device.device_name} 的数量`);
      } else {
        // 如果配置不存在，创建新的项目
        const cartItem = {
          id: cartItemKey, // 添加唯一标识
          device_id: device.id,
          device_name: device.device_name,
          factory: device.factory,
          is_need: device.is_need,
          quantity: device.quantity,
          accessories: selectedAccessories,
          shipping_info: { // 新增发货信息，自动填充当前合同信息
            recipient_name: this.contractInfo?.recipient_name || '',
            recipient_tel: this.contractInfo?.recipient_tel || '',
            recipient_address: this.contractInfo?.recipient_address || '',
            remark: ''
          }
        };
        
        this.cartItems.push(cartItem);
        this.$message.success(`已添加 ${device.device_name} `);
      }
    },
    
    // 移除购物车项目
    removeFromCart(index) {
      this.cartItems.splice(index, 1);
      this.$message.success('已移除');
    },
    
    // 清空购物车
    clearCart() {
      this.cartItems = [];
      this.$message.success('购物车已清空');
    },
    
    // 处理配件选择变化
    handleAccessoryChange(device, accessory) {
      if (accessory.selected) {
        // 如果配件有规格，确保选择了规格
        if (accessory.standards && accessory.standards.length > 0) {
          accessory.standards.forEach(standard => {
            if (standard.values && standard.values.length > 0 && !accessory.selectedStandards[standard.id]) {
              this.$set(accessory.selectedStandards, standard.id, standard.values[0].id);
            }
          });
        }
      } else {
        // 如果取消选择配件，清空规格选择
        accessory.selectedStandards = {};
      }
    },
    
    // 规格选择变化
    handleStandardChange(device, accessory, standard) {
      // 规格选择变化时，只记录变化，不自动重新添加到购物车
      console.log('规格选择变化:', standard.standard_name, accessory.selectedStandards[standard.id]);
      // 规格选择变化后，需要用户手动点击"添加产品"按钮才会更新购物车
    },
    
    // 处理设备数量变化
    handleDeviceQuantityChange(device) {
      // 收集当前选中的配件
      const selectedAccessories = [];
      device.accessories.forEach(accessory => {
        if (accessory.selected) {
          const accessoryItem = {
            id: accessory.id,
            selectedStandards: accessory.selectedStandards || {}
          };
          selectedAccessories.push(accessoryItem);
        }
      });
      
      // 生成当前配置的哈希值
      const currentHash = this.generateAccessoriesHash(selectedAccessories);
      
      // 查找购物车中对应配置的商品并更新数量
      const cartItem = this.cartItems.find(item => {
        const itemHash = this.generateAccessoriesHash(item.accessories);
        return item.device_id === device.id && itemHash === currentHash;
      });
      
      if (cartItem) {
        cartItem.quantity = device.quantity;
      }
    },
    
    // 生成配件组合的哈希值，用于区分不同配置
    generateAccessoriesHash(accessories) {
      if (!accessories || accessories.length === 0) {
        return 'no_accessories';
      }
      
      // 按配件ID排序，确保相同配置生成相同的哈希值
      const sortedAccessories = accessories
        .map(acc => {
          // 强制深拷贝，确保数据独立性
          let selectedStandards = {};
          if (acc.selectedStandards && typeof acc.selectedStandards === 'object') {
            try {
              // 使用JSON深拷贝，确保完全独立
              selectedStandards = JSON.parse(JSON.stringify(acc.selectedStandards));
            } catch (e) {
              // 如果JSON深拷贝失败，手动提取有效属性
              Object.keys(acc.selectedStandards).forEach(key => {
                if (key !== '__ob__' && key !== 'dep' && key !== 'vmCount' && key !== 'value' && key !== 'shallow' && key !== 'mock') {
                  selectedStandards[key] = acc.selectedStandards[key];
                }
              });
            }
          }
          
          return {
            id: acc.id,
            selectedStandards: selectedStandards
          };
        })
        .sort((a, b) => a.id - b.id);
      
      // 生成更精确的哈希字符串，包含所有规格选择信息
      const hashParts = sortedAccessories.map(acc => {
        const standardsHash = Object.keys(acc.selectedStandards)
          .sort()
          .map(standardId => `${standardId}:${acc.selectedStandards[standardId]}`)
          .join(',');
        return `${acc.id}:{${standardsHash}}`;
      });
      
      const finalHash = hashParts.join('|');
      
      // 调试信息
      console.log('生成哈希值 - 配件数据:', accessories);
      console.log('生成哈希值 - 排序后配件:', sortedAccessories);
      console.log('生成哈希值 - 最终哈希:', finalHash);
      
      return finalHash;
    },
    
    // 获取规格信息字符串
    getStandardsInfo(accessory) {
      if (!accessory.standards || accessory.standards.length === 0) {
        return '';
      }
      
      const standardsInfo = [];
      accessory.standards.forEach(standard => {
        const selectedValueId = accessory.selectedStandards[standard.id];
        if (selectedValueId) {
          const selectedValue = standard.values.find(value => value.id === selectedValueId);
          if (selectedValue) {
            standardsInfo.push(`${standard.standard_name}: ${selectedValue.standard_value}`);
          }
        }
      });
      
      const result = standardsInfo.join(', ');
      
      // 调试信息
      console.log('获取规格信息 - 配件:', accessory.accessory_name);
      console.log('获取规格信息 - 规格数据:', accessory.standards);
      console.log('获取规格信息 - 选择的规格:', accessory.selectedStandards);
      console.log('获取规格信息 - 结果:', result);
      
      return result;
    },
    
    // 自动填充发货信息
    autoFillShippingInfo() {
      if (this.contractInfo) {
        // 从合同数据中获取收货人信息
        const recipientInfo = {
          recipient_name: this.contractInfo.recipient_name || '',
          recipient_tel: this.contractInfo.recipient_tel || '',
          recipient_address: this.contractInfo.recipient_address || '',
          remark: ''
        };
        
        // 更新所有已选产品的发货信息
        this.cartItems.forEach(item => {
          item.shipping_info = { ...recipientInfo };
        });
      }
    },
    
    // 同步发货信息
    syncShippingInfo() {
      this.autoFillShippingInfo();
      this.$message.success('已同步所有产品的发货信息');
    },
    
    // 生成订单
    async generateOrders() {
      try {
        // 检查购物车是否为空
        if (this.cartItems.length === 0) {
          this.$message.warning('请至少选择一个产品生成');
          return;
        }
        
        // 检查token是否存在
        if (!checkToken()) {
          this.$message.error('登录已过期，请重新登录');
          handleTokenExpired();
          return;
        }
        
        this.generating = true;
        
        // 收集购物车中的订单项目
        const orderItems = this.cartItems.map(item => ({
          device_id: item.device_id,
          device_name: item.device_name,
          quantity: item.quantity,
          accessories: item.accessories.map(accessory => {
            // 为每个配件添加详细的规格信息
            const accessoryWithStandards = {
              id: accessory.id,
              accessory_name: accessory.accessory_name,
              is_standard: accessory.is_standard,
              selectedStandards: accessory.selectedStandards,
              standardsInfo: accessory.standardsInfo,
              // 新增：详细的规格信息
              standards_detail: []
            };
            
            // 如果有规格选择，添加详细信息
            if (accessory.selectedStandards && Object.keys(accessory.selectedStandards).length > 0) {
              // 从设备列表中获取完整的规格信息
              const device = this.deviceList.find(d => d.id === item.device_id);
              if (device) {
                const originalAccessory = device.accessories.find(a => a.id === accessory.id);
                if (originalAccessory && originalAccessory.standards) {
                  originalAccessory.standards.forEach(standard => {
                    const selectedValueId = accessory.selectedStandards[standard.id];
                    if (selectedValueId) {
                      const selectedValue = standard.values.find(v => v.id === selectedValueId);
                      if (selectedValue) {
                        accessoryWithStandards.standards_detail.push({
                          standard_id: standard.id,
                          standard_name: standard.standard_name,
                          standard_value_id: selectedValue.id,
                          standard_value: selectedValue.standard_value
                        });
                      }
                    }
                  });
                }
              }
            }
            
            return accessoryWithStandards;
          }),
          shipping_info: item.shipping_info // 添加发货信息
        }));
        
        const orderData = {
          contract_id: this.contractInfo.id,
          customer_id: this.contractInfo.customer_id,
          order_items: orderItems
        };
        
        console.log('生成订单数据:', orderData);
        
        const response = await generateOrder(orderData);
        
        if (response.data && response.data.code === 1) {
          this.$message.success(`成功生成 ${response.data.order_count} 个订单`);
          // 跳转到订单管理页面
          this.$router.push('/contract-management');
        } else {
          this.$message.error(response.data.msg || '生成订单失败');
        }
      } catch (error) {
        console.error('生成订单失败:', error);
        if (checkTokenFromError(error)) {
          this.$message.error('登录已过期，请重新登录');
          handleTokenExpired();
        } else {
          this.$message.error('生成订单失败');
        }
      } finally {
        this.generating = false;
      }
    },
    
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    
    // 格式化金额
    formatMoney(amount) {
      if (!amount && amount !== 0) return '0.00';
      return parseFloat(amount).toFixed(2);
    }
  }
}
</script>

<style scoped>
.contract-order-generate-view {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 60px);
  box-sizing: border-box;
}

/* 区域样式 */
.contract-info-section,
.product-selection-section,
.selected-products-section {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 15px 20px;
  border-bottom: 1px solid #e4e7ed;
}

.section-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  display: flex;
  align-items: center;
}

.section-header h3 i {
  margin-right: 8px;
  color: #409eff;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 合同信息样式 */
.contract-details {
  padding: 20px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-item label {
  font-weight: 500;
  color: #606266;
  min-width: 80px;
  margin-right: 10px;
}

.info-item span {
  color: #303133;
}

.info-item .amount {
  color: #f56c6c;
  font-weight: 600;
}

/* 产品选择样式 */
.search-bar {
  padding: 0 20px 20px 20px;
}

.product-list {
  padding: 0 20px 20px 20px;
}

.device-item {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 15px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.device-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.device-actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quantity-selector label {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
}

.factory-info {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  font-size: 13px;
  color: #606266;
}

.accessories-list h5 {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 14px;
}

.accessories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.accessory-item {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 10px;
  background-color: #fafafa;
}

.accessory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.accessory-name {
  font-weight: 500;
  color: #303133;
}

/* 多规格选择样式 */
.standards-selection {
  margin-top: 12px;
  padding: 12px;
  background: #fafbfc;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  transition: all 0.2s ease;
}

.standards-selection.has-standards {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-color: #d1d9e0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.standards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.standard-item {
  padding: 12px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e8eaed;
  transition: all 0.2s ease;
}

.standard-item:hover {
  border-color: #c0c4cc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.standard-header {
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
}

.standard-name {
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
}

.standard-name::before {
  content: "●";
  color: #409eff;
  font-size: 12px;
  margin-right: 6px;
}

.standard-values {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.standard-radio {
  margin: 0 !important;
}

.standard-radio .el-radio__input {
  display: none;
}

.standard-radio .el-radio__label {
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
  font-size: 12px;
  color: #606266;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 500;
  white-space: nowrap;
  min-width: 60px;
  line-height: 1.4;
}

.standard-radio .el-radio__label:hover {
  background: #f0f9ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.standard-radio.is-checked .el-radio__label {
  background: #e6f7ff;
  border-color: #409eff;
  color: #409eff;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(64, 158, 255, 0.15);
}

.no-standards {
  text-align: center;
  padding: 8px;
}

.no-standards-text {
  font-size: 12px;
  color: #909399;
  font-style: italic;
}

/* 已选产品样式 */
.cart-items {
  padding: 0 20px 20px 20px;
}

.cart-item {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.device-name {
  font-weight: 500;
  color: #303133;
  font-size: 14px;
}

.device-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.device-config {
  font-size: 12px;
  color: #909399;
  font-weight: normal;
}

.cart-item-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quantity-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quantity-section label {
  font-size: 13px;
  color: #606266;
  min-width: 50px;
}

.accessories-section {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.accessories-section label {
  font-size: 13px;
  color: #606266;
  min-width: 50px;
  margin-top: 2px;
}

.accessories-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 发货信息样式 */
.shipping-info-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #dcdfe6;
}

.shipping-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #409eff;
  font-size: 14px;
  font-weight: 500;
}

.shipping-title i {
  margin-right: 5px;
  font-size: 16px;
}

.shipping-form {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.shipping-form .form-item {
  margin-bottom: 15px;
}

.shipping-form .form-label {
  display: block;
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  margin-bottom: 5px;
  white-space: nowrap;
}

.shipping-form .el-input,
.shipping-form .el-textarea {
  width: 100%;
}

.shipping-form .el-input__inner,
.shipping-form .el-textarea__inner {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.shipping-form .el-input__inner:focus,
.shipping-form .el-textarea__inner:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.shipping-form .el-input:hover .el-input__inner,
.shipping-form .el-textarea:hover .el-textarea__inner {
  border-color: #c0c4cc;
}

/* 空购物车样式 */
.empty-cart {
  text-align: center;
  padding: 40px 20px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 2px dashed #dee2e6;
  margin: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .contract-order-generate-view {
    padding: 10px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .device-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .device-actions {
    width: 100%;
    justify-content: space-between;
  }
}
</style>
